<template>
  <div>
      <div>
          <table>
              <tr>
                  <td>
                      <div style="width: 485px">
                          <vxe-table :data.sync="tableDataLink" @cell-click="LinkClick" height="400px" show-overflow show-header-overflow resizable stripe header-align="center" border size="mini" :sort-config="{trigger: 'cell'}" :tree-config="{children: 'children', expandAll: false, trigger: 'row'}" :span-method="colspanMethod" :row-class-name="rowClassName" status-msg-group="none" :select-config="{labelField: 'link_rptitemcode'}">
                              <vxe-table-column field="rpt_itemname" title="检验项目" width="120px" align="center" tree-node></vxe-table-column>
                              <vxe-table-column field="result_str" title="检验结果" width="60px" align="right" head-align="center">
                                  <template v-slot="{ row }">
                                      <div :style="ResultClass(row)">
                                          <span v-if="Options.resultstrbold=='1'" style="font-weight:bold">{{row.result_str}}</span>
                                          <span v-else>{{row.result_str}}</span>
                                      </div>
                                  </template>
                              </vxe-table-column>
                              <vxe-table-column field="result_ref" title="参考值" width="60px"></vxe-table-column>
                              <vxe-table-column field="sampledate" title="样本日期" width="80px" align="center"></vxe-table-column>
                              <vxe-table-column field="sampleno" title="样本号" width="60px" align="center"></vxe-table-column>
                              <vxe-table-column field="rptunitname" title="报告单元" width="100px"></vxe-table-column>
                          </vxe-table>
                      </div>
                  </td>
                  <td v-if="LinkChartShow">
                      <div style="width:500px">
                          <div id="dialogLinkChart" style="width: 100%;height:400px;vertical-align:center;"></div>
                      </div>
                  </td>
              </tr>
          </table>

      </div>
      <div style="text-align: right;padding-top: 5px">
          <el-button @click="cancel()">确 定</el-button>
      </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: ["linkitemcode", "reportid", "rptunitid", "pOptions"],
  data() {
      return {
          //关联项目查看弹窗
          linkshow: false,
          tableDataLink: [],
          LinkChartShow: false,
          Options: this.pOptions,
      };
  },
  created() {
      this.QueryLinkItem();
  },
  methods: {
      QueryLinkItem() {
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS310",
                  method: "post",
                  data: {
                      action: "querylinkitem",
                      rptitemcode: this.linkitemcode,
                      reportid: this.reportid,
                      rptunitid: this.rptunitid
                  }
              })
              .then(res => {
                  if (res.errcode == "1") {
                      this.tableDataLink = [];
                      for (let i = 0; i < res.dtlink.length; i++) {
                          let datas = res.dt.filter(item => item.rpt_itemcode == res.dtlink[i].link_rptitemcode);
                          if (datas.length > 1) res.dtlink[i].children = datas.slice(1);
                          this.tableDataLink.push(res.dtlink[i]);
                          if (datas.length > 0) {
                              res.dtlink[i].result_str = datas[0].result_str;
                              res.dtlink[i].result_ref = datas[0].result_ref;
                              res.dtlink[i].result_flag = datas[0].result_flag;
                              res.dtlink[i].sampledate = datas[0].sampledate;
                              res.dtlink[i].sampleno = datas[0].sampleno;
                              res.dtlink[i].rptunitname = datas[0].rptunitname;
                              res.dtlink[i].rpt_itemcode = datas[0].rpt_itemcode;
                          }
                      }
                      console.log("link", this.tableDataLink);
                  }
              });
      },
      colspanMethod({ row, rowIndex, column, columnIndex, data }) {
          if (row.isgroup === 1) {
              if (columnIndex === 0) {
                  return { rowspan: 1, colspan: 6 };
              } else if (columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 1) {
                  return { rowspan: 0, colspan: 0 };
              }
          }
      },
      rowClassName({ row, rowIndex }) {
          if (row.isgroup === 1) {
              return "parent-row";
          }
      },
      LinkClick({ row, column }) {
          this.LinkChartShow = false;
          this.DrawCharts("dialogLinkChart", row);
      },
      DrawCharts(chartname, row) {
          var xline = [];
          var xlinefield = [];
          var data = [];
          var column = [];
          if (row) {
              var datarow = this.tableDataLink.find(item => item.rpt_itemcode == row.rpt_itemcode);
              if (datarow && parseFloat(datarow.result_str) != NaN) {
                  xline.push(datarow.sampledate.trim());
                  xlinefield.push(datarow.sampledate.trim() + " " + datarow.sampleno.trim());
                  data.push(parseFloat(datarow.result_str));
              } else {
                  return;
              }
              if (datarow.hasOwnProperty("children") && datarow.children.length > 0) {
                  for (let i = 0; i < datarow.children.length; i++) {
                      if (parseFloat(datarow.children[i].result_str) != NaN) {
                          xline.push(datarow.children[i].sampledate.trim());
                          xlinefield.push(datarow.sampledate.trim() + " " + datarow.sampleno.trim());
                          data.push(parseFloat(datarow.children[i].result_str));
                      }
                  }
              }
              if (data.length > 0) {
                  this.LinkChartShow = true;
              } else {
                  this.LinkChartShow = false;
              }
          }
          console.log("data", data);
          console.log("xline", xline);
          //echarts画图
          this.$nextTick(() => {
              this.charts = echarts.init(document.getElementById(chartname));
              this.charts.setOption({
                  title: {
                      text: datarow.rpt_itemname,
                      textAlign: "center",
                      x: "center",
                      y: "top"
                  },
                  tooltip: {
                      trigger: "axis"
                  },
                  grid: {
                      left: "3%",
                      right: "4%",
                      bottom: "3%",
                      containLabel: true
                  },
                  xAxis: {
                      name: "",
                      nameLocation: "middle",
                      type: "category",
                      boundaryGap: true,
                      data: xline,
                      axisLabel: {
                          fontSize: 8
                      }
                  },
                  yAxis: {
                      name: "",
                      nameLocation: "middle",
                      boundaryGap: false,
                      type: "value",
                      axisLabel: {
                          fontSize: 8
                      }
                  },
                  series: [
                      {
                          name: "结果",
                          type: "line",
                          stack: "总量",
                          data: data
                      }
                  ]
              });
          });
      },
      ResultClass(row) {
          var stylestr = "padding:0 3px;";
          if (this.Options.resultcolor_mode == "1") stylestr += "color:";
              else stylestr += "background-color:";
          var flag = row.result_flag;
          switch (flag) {
              case "M":
                  stylestr += this.Options.resultcolor_m;
                  break;
              case "H":
                  stylestr += this.Options.resultcolor_h;
                  break;
              case "L":
                  stylestr += this.Options.resultcolor_l;
                  break;
              case "P":
                  stylestr += this.Options.resultcolor_p;
                  break;
              case "W":
                  stylestr += this.Options.resultcolor_w;
                  break;
              case "E":
                  stylestr += this.Options.resultcolor_e;
                  break;
              case "Q":
                  stylestr += this.Options.resultcolor_w;
                  break;
              default:
                  stylestr += this.Options.resultcolor_m;
                  break;
          }
          
          if (row.result_str == "未做") {
              stylestr += ";color: #0095D9";
          }
          return stylestr;
      },
      cancel() {
          this.$emit("cancel");
      },
  },
}
</script>
<style scoped>
</style>